<template>
  <div :id="did" class="oDiv" :style="{'height': height, 'width':width,'z-index': 999,'margin': '10px'}">
    <span class="tl"></span>
    <span class="l"></span>
    <span class="bl"></span>
    <span class="t"></span>
    <span class="tr"></span>
    <span class="r"></span>
    <span class="br"></span>
    <span class="b"></span>
    <div class="slot">
      <slot></slot>
    </div>
    <div class="test"></div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    did: {
      type: String,
      default () {
        return ''
      }
    },
    width: {
      type: String,
      default () {
        return ''
      }
    },
    height: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      var oDiv = document.getElementById(this.did)
      var aSpan = oDiv.querySelectorAll('span')
      var top = oDiv.querySelector('.t')
      var bottom = oDiv.querySelector('.b')
      var left = oDiv.querySelector('.l')
      var right = oDiv.querySelector('.r')
      for (var i = 0; i < aSpan.length; i++) {
        zoomFn(aSpan[i])
      }
      function zoomFn (obj) {
        obj.onmousedown = function (event) {
          event = event || window.event
          event.cancelable()

          var oldDivWidth = oDiv.offsetWidth
          var oldDivHeight = oDiv.offsetHeight
          var oldDivLeft = oDiv.offsetLeft
          var oldDivTop = oDiv.offsetTop
          var oldTopWidth = top.offsetWidth
          var oldBottomWidth = bottom.offsetWidth
          var oldLeftHeight = left.offsetHeight
          var oldRightHeight = right.offsetHeight
          var oldX = event.clientX
          var oldY = event.clientY

          document.onmousemove = function (event) {
            event = event || window.event
            if (obj.className === 'tl') {
              oDiv.style.width = oldDivWidth - (event.clientX - oldX) + 'px'
              oDiv.style.height = oldDivHeight - (event.clientY - oldY) + 'px'
              oDiv.style.left = oldDivLeft + (event.clientX - oldX) + 'px'
              oDiv.style.top = oldDivTop + (event.clientY - oldY) + 'px'
              left.style.height = oldLeftHeight - (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight - (event.clientY - oldY) + 'px'
              top.style.width = oldTopWidth - (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth - (event.clientX - oldX) + 'px'
            } else if (obj.className === 'bl') {
              oDiv.style.width = oldDivWidth - (event.clientX - oldX) + 'px'
              oDiv.style.height = oldDivHeight + (event.clientY - oldY) + 'px'
              oDiv.style.left = oldDivLeft + (event.clientX - oldX) + 'px'
              oDiv.style.bottom = oldDivTop + (event.clientY + oldY) + 'px'
              left.style.height = oldLeftHeight + (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight + (event.clientY - oldY) + 'px'
              top.style.width = oldTopWidth - (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth - (event.clientX - oldX) + 'px'
            } else if (obj.className === 'tr') {
              oDiv.style.width = oldDivWidth + (event.clientX - oldX) + 'px'
              oDiv.style.height = oldDivHeight - (event.clientY - oldY) + 'px'
              oDiv.style.right = oldDivLeft - (event.clientX - oldX) + 'px'
              oDiv.style.top = oldDivTop + (event.clientY - oldY) + 'px'
              left.style.height = oldLeftHeight - (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight - (event.clientY - oldY) + 'px'
              top.style.width = oldTopWidth + (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth + (event.clientX - oldX) + 'px'
            } else if (obj.className === 'br') {
              oDiv.style.width = oldDivWidth + (event.clientX - oldX) + 'px'
              oDiv.style.height = oldDivHeight + (event.clientY - oldY) + 'px'
              oDiv.style.right = oldDivLeft - (event.clientX - oldX) + 'px'
              oDiv.style.bottom = oldDivTop + (event.clientY + oldY) + 'px'
              left.style.height = oldLeftHeight + (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight + (event.clientY - oldY) + 'px'
              top.style.width = oldTopWidth + (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth + (event.clientX - oldX) + 'px'
            } else if (obj.className === 't') {
              oDiv.style.height = oldDivHeight - (event.clientY - oldY) + 'px'
              oDiv.style.top = oldDivTop + (event.clientY - oldY) + 'px'
              left.style.height = oldLeftHeight - (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight - (event.clientY - oldY) + 'px'
            } else if (obj.className === 'b') {
              oDiv.style.height = oldDivHeight + (event.clientY - oldY) + 'px'
              oDiv.style.bottom = oldDivTop - (event.clientY + oldY) + 'px'
              left.style.height = oldLeftHeight + (event.clientY - oldY) + 'px'
              right.style.height = oldRightHeight + (event.clientY - oldY) + 'px'
            } else if (obj.className === 'l') {
              oDiv.style.height = oldDivHeight + 'px'
              oDiv.style.width = oldDivWidth - (event.clientX - oldX) + 'px'
              oDiv.style.left = oldDivLeft + (event.clientX - oldX) + 'px'
              top.style.width = oldTopWidth - (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth - (event.clientX - oldX) + 'px'
            } else if (obj.className === 'r') {
              oDiv.style.height = oldDivHeight + 'px'
              oDiv.style.width = oldDivWidth + (event.clientX - oldX) + 'px'
              oDiv.style.right = oldDivLeft - (event.clientX - oldX) + 'px'
              top.style.width = oldTopWidth + (event.clientX - oldX) + 'px'
              bottom.style.width = oldBottomWidth + (event.clientX - oldX) + 'px'
            }
          }
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    }
  }
}
</script>

<style scoped>
  .oDiv{
    position: relative;
    top: 0;
    left: 0;
    border:5px solid transparent;
    border-image: url('../../assets/image/borderImg.png') 5 round;
    cursor: move;
  }
  .t, .l, .r, .b, .tl, .tr, .br, .bl {
    position: absolute;
    /*background: transparent;*/
  }
  .tl, .tr, .br, .bl {
    width: 20px;
    height: 20px;
    /*background-color: green;*/
  }
  .t, .b{
    left: 15px;
    width: calc(100% - 30px);
    height: 20px;
    /*background: red;*/
  }
  .l, .r {
    top: 15px;
    height: calc(100% - 30px);
    width: 20px;
    /*background: red;*/
  }
  .tl{
    top: -5px;
    left: -5px;
    cursor: nw-resize;
  }
  .l{
    left: -5px;
    cursor: w-resize;
  }
  .bl{

    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
  }
  .t{
    top: -5px;
    cursor: n-resize;
  }
  .tr{
    top: -5px;
    right: -5px;
    cursor: ne-resize;
  }
  .r{
    right: -5px;
    cursor: e-resize;
  }
  .br{
    right: -5px;
    bottom: -5px;
    cursor: se-resize;
  }
  .b{
    bottom: -5px;
    cursor: s-resize;
  }
  .slot{
    position: relative;
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
  }
  .test{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(3,184,255,0);
    z-index: 99;
    left: 0;
    top:0;
  }
  .test:hover{
    background: rgba(3,184,255,0.3)
  }
</style>
